<template>
	<base-list-plus
		class="flex-1"
		:loading="loading"
		:isFinish="isFinish"
		:isEmpty="list.length === 0"
		@load="search">
		<up-feed-item class="mt-2" v-for="item in list" :key="item.id" :data="item"></up-feed-item>
	</base-list-plus>
</template>

<script lang="ts" setup>
import { computed, watch } from 'vue'
import { BaseListPlus } from '@/components/base'
import { UpFeedItem } from '@/components/up'
import { useRequest } from '@/hooks'
import { FeedType } from '@/types'
import { useAppStore, useFeedStore } from '@/store'
import { getEventFeedsList } from '@/api/feed'

const props = defineProps({
	eventId: {
		type: String
	}
})

const appStore = useAppStore()
const feedStore = useFeedStore()

const params = computed(() => ({
	locale: appStore.lang,
	oddsStyle: appStore.odds,
	currency: appStore.currency,
	orderBy: 'created_at',
	eventId: props.eventId
}))

const { run, loading, list, isFinish } = useRequest<FeedType>(getEventFeedsList, {
	pageSize: 5,
	onSuccess: () => {
		feedStore.setList(list.value, 'activity')
	}
})

const search = (refresh = false) => {
	run(params.value, { refresh })
}

watch(
	() => params.value,
	() => {
		if (props.eventId) {
			search(true)
		}
	},
	{ immediate: true }
)
</script>
